<?php if (!defined('THINK_PATH')) exit(); /*a:1:{s:78:"D:\phpStudy\WWW\qybaowap\public/../application/index\view\user\areaselect.html";i:1513928451;}*/ ?>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="__STATIC__/js/base.js"></script>
    <title>首页</title>
    <link rel="stylesheet" href="__STATIC__/css/service.css">
    <script src="__STATIC__/js/jquery-1.11.1.min.js"></script>
    <script src="__STATIC__/js/layer_mobile/layer.js"></script>
    <link rel="stylesheet" href="__STATIC__/js/layer_mobile/need/layer.css">
</head>
<body >
<section class="wrap">
    <div id="area-info">
        <ul class="tab bg-white" >
            <li  class="tab-item active " id="province">
                <span>选择省</span>
                <img src="__STATIC__/images/selected.png"/>
            </li>
            <li  class="tab-item" id="city">
                <span>选择市</span>
                <img src="__STATIC__/images/arrow_down.png"/>
            </li>
            <li  class="tab-item" id="area">
                <span>选择区</span>
                <img src="__STATIC__/images/arrow_down.png"/>
            </li>
        </ul>
        <div id="selected-list">
            <ul class="sel-province clearfix">
                <li class=" pull-left"><span>北京市</span></li>
                <li class="pull-left "><span>天津市</span></li>
                <li class="pull-left "><span>上海市</span></li>
                <li class="pull-left"><span>重庆市</span></li>
                <li class="pull-left"><span>四川市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
            </ul>
            <ul  class="sel-city clearfix">
                <li class="pull-left "><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
                <li class="pull-left"><span>河北市</span></li>
            </ul>
            <ul class="sel-area clearfix">
                <li class="pull-left "><span>朝阳区</span></li>
                <li class="pull-left"><span>海淀区</span></li>
                <li class="pull-left"><span>东城区</span></li>
                <li class="pull-left"><span>西城区</span></li>
                <li class="pull-left"><span>丰台区</span></li>
                <li class="pull-left"><span>大兴区</span></li>
                <li class="pull-left"><span>朝阳区</span></li>
                <li class="pull-left"><span>海淀区</span></li>
                <li class="pull-left"><span>东城区</span></li>
                <li class="pull-left"><span>西城区</span></li>
                <li class="pull-left"><span>丰台区</span></li>
                <li class="pull-left"><span>大兴区</span></li>
            </ul>
        </div>
    </div>

</section>

</body>
<script>
    $(function(){
        $('.tab-item').on('click',function(){
            $('#selected-list ul').hide();
            $('.tab-item').removeClass('active');
            $('.tab-item').children('img').attr('src','__STATIC__/images/arrow_down.png');
            if($(this).hasClass('active')){
            }else {
                $(this).addClass('active');
                $(this).children('img').attr('src','__STATIC__/images/selected.png');
                var selected = $(this).attr('id');
                if(selected == 'province'){
                    $(' #selected-list .sel-province ').show();
                }
                if(selected == 'city'){
                    if($('#province span').html()=='选择省'){
                        layer.open({
                            content:'请先选择省'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $(' #selected-list .sel-city ').show();
                    }
                }
                if(selected == 'area'){
                    if($('#province span').html()=='选择省'||$('#city span').html()=='选择市'){
                        layer.open({
                            content:'请先选择省、市'
                            ,skin: 'msg'
                            ,time:3 //2秒后自动关闭
                        });
                    }else {
                        $(' #selected-list .sel-area ').show();
                    }
                }
            }
        });
        $('#selected-list  ul li').on('click',function(){
            $(this).parent().children('li').removeClass('active');;
            $(this).addClass('active');
            if($(this).parent().hasClass('sel-province')){
                $('#province span').html($(this).children('span').text());
            }
            if($(this).parent().hasClass('sel-city')){
                $('#city span').html($(this).children('span').text());
            }
            if($(this).parent().hasClass('sel-area')){
                $('#area span').html($(this).children('span').text());
                var areaId = $(this).children('span').text();
                window.location.href="/editshippingaddress.html?areaId="+areaId;
            }

        });
    });
</script>
</html><!DOCTYPE html>